<template>
   <!-- 商品分类导航 -->
        <div class="type-nav">
            <div class="container" @mouseleave="noshow()">
                <div @mouseleave="bgnoshow()" @mouseenter="show()">
                 <h2 class="all">全部商品分类</h2>
                 <!-- 设置过度动画 -->
                 <transition name="sort">
                   <div class="sort" v-show="ifshow">
                    <div class="all-sort-list2" @click="gosearch($event)">
                        <!-- 一级分类                                                                              当鼠标停留时添加样式类-->
                        <div class="item" v-for="(c1,index) in reqcategory.category.slice(0,16)" :key="c1.categoryId" :class="{bgc:currentindex==index}">
                            <h3 @mouseenter="bgshow(index)">
                                <a :data-categoryname="c1.categoryName" :data-categoryid="c1.categoryId">{{c1.categoryName}}</a>
                            </h3>
                            <div class="item-list clearfix" :style="{display:currentindex==index?'block':'none'}">
                                <!-- 二级分类 -->
                                <div class="subitem"  v-for="(c2,index) in c1.categoryChild" :key="c2.categoryId">
                                    <dl class="fore">
                                        <dt>
                                            <a  :data-categoryname="c2.categoryName" :data-categoryid2="c2.categoryId">{{c2.categoryName}}</a>
                                        </dt>
                                        <dd>
                                            <!-- 三级分类 -->
                                            <em v-for="(c3,index) in c2.categoryChild" :key="c3.categoryId"> 
                                                <a  :data-categoryname="c3.categoryName" :data-categoryid3="c3.categoryId">{{c3.categoryName}}</a>
                                            </em>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                 </transition>
                
                </div>
                <nav class="nav">
                    <a href="###">服装城</a>
                    <a href="###">美妆馆</a>
                    <a href="###">尚品汇超市</a>
                    <a href="###">全球购</a>
                    <a href="###">闪购</a>
                    <a href="###">团购</a>
                    <a href="###">有趣</a>
                    <a href="###">秒杀</a>
                </nav>
            </div>
        </div>
</template>

<script>
// 引入节流函数
import {throttle} from 'lodash'
import {onMounted,toRefs,ref} from 'vue'
import {useStore} from 'vuex'
import {useRouter,useRoute} from 'vue-router'
export default {
    name:'TypeNav',
    setup() {
        const store = useStore()//创建store
        const router = useRouter()//路由器
        const route = useRoute()//路由规则
        // 从vuex仓库获取三级分类数据
     let {reqcategory}={ ...toRefs(store.state)}
     let currentindex=ref(-1)
     let ifshow = ref(true)
    //  鼠标进入 改变一级分类背景颜色和显示二三级分类
    let bgshow =throttle(function (index){//运用节流函数实现节流
       currentindex.value=index//注意：操作由ref定义的基本数据需要.value
      },50)
   //  取消 样式和隐藏二三级分类 
    function bgnoshow(){
       currentindex.value=-1
    }
    // 编程式导航路由跳转--并合并路由携带path参数
    function gosearch(event){
        // event.target.dataset可以获取节点的自定义属性和属性值 设置自定义属性-:data-categoryname="c2.categoryName"
        let {categoryname,categoryid,categoryid2,categoryid3} =event.target.dataset //获取自定义属性的值
        let location ={name:'search2'}
        let query={categoryName:categoryname}
        if(categoryname){
            if(categoryid){
                query.category1Id=categoryid
            }
            else if(categoryid2){
                query.category2Id=categoryid2
            }
            else{
                query.category3Id=categoryid3
            }
            location.query =query
        // 判断搜索框是否有参--合并搜索框携带的参数
            if(route.params){
                location.params =route.params
            }
             router.push(location)
        }
    }
    //在search组件中鼠标移入显示三级分类
    function show(){
        if(route.meta.show2){
             ifshow.value=true
            }
    }
      //在search组件中鼠标移出隐藏三级分类
    function noshow(){
         if(route.meta.show2){
                ifshow.value=false
            }
    }
      onMounted(()=>{
            // 判断当跳转到search组件时隐藏三级分类
            if(route.meta.show2){
                ifshow.value=false
            }
        })
      return{
         bgshow,
         currentindex,
         ifshow,
         reqcategory,
         bgnoshow, gosearch,show,noshow,
       
      }
}
}
</script>

<style lang='less'>
     .type-nav {
        border-bottom: 2px solid #e1251b;

        .container {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            position: relative;

            .all {
                width: 210px;
                height: 45px;
                background-color: #e1251b;
                line-height: 45px;
                text-align: center;
                color: #fff;
                font-size: 14px;
                font-weight: bold;
            }

            .nav {
                a {
                    height: 45px;
                    margin: 0 22px;
                    line-height: 45px;
                    font-size: 16px;
                    color: #333;
                }
            }

            .sort {
                position: absolute;
                left: 0;
                top: 45px;
                width: 210px;
                height: 461px;
                position: absolute;
                background: #fafafa;
                z-index: 999;

                .all-sort-list2 {
                    .item {
                        h3 {
                            line-height: 30px;
                            font-size: 14px;
                            font-weight: 400;
                            overflow: hidden;
                            padding: 0 20px;
                            margin: 0;

                            a {
                                color: #333;
                            }
                           
                        }

                        .item-list {
                            position: absolute;
                            width: 734px;
                            min-height: 460px;
                            background: #f7f7f7;
                            left: 210px;
                            border: 1px solid #ddd;
                            top: 0;
                            z-index: 9999 !important;

                            .subitem {
                                float: left;
                                width: 650px;
                                padding: 0 4px 0 8px;

                                dl {
                                    border-top: 1px solid #eee;
                                    padding: 6px 0;
                                    overflow: hidden;
                                    zoom: 1;

                                    &.fore {
                                        border-top: 0;
                                    }

                                    dt {
                                        float: left;
                                        width: 54px;
                                        line-height: 22px;
                                        text-align: right;
                                        padding: 3px 6px 0 0;
                                        font-weight: 700;
                                    }

                                    dd {
                                        float: left;
                                        width: 415px;
                                        padding: 3px 0 0;
                                        overflow: hidden;

                                        em {
                                            float: left;
                                            height: 14px;
                                            line-height: 14px;
                                            padding: 0 8px;
                                            margin-top: 5px;
                                            border-left: 1px solid #ccc;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .bgc{
                        background: skyblue;
                    }
                     a:hover{
                                cursor:pointer;
                            }
                }
            }
            // 定义开始动画进入时
            .sort-enter-from{
                height: 0;
            }
            // 定义动画进入后
             .sort-enter-to{
                 height: 461px;
            }
            //定义 动画时间，速率
            .sort-enter-active{
                transition:all .5s linear
            }

        }
    }
</style>